<template>
  <div class="left-panel">
    <a-collapse v-model:activeKey="activeKeys" :bordered="false">
      <a-collapse-panel key="1" header="输入型组件">
        <div class="component-grid">
          <div
            v-for="component in inputComponents"
            :key="component.id"
            class="component-item"
            draggable="true"
            @dragstart="handleDragStart(component, $event)"
          >
            <component :is="component.icon" class="component-icon" />
            <span class="component-label">{{ component.label }}</span>
          </div>
        </div>
      </a-collapse-panel>

      <a-collapse-panel key="2" header="选择型组件">
        <div class="component-grid">
          <div
            v-for="component in selectComponents"
            :key="component.id"
            class="component-item"
            draggable="true"
            @dragstart="handleDragStart(component, $event)"
          >
            <component :is="component.icon" class="component-icon" />
            <span class="component-label">{{ component.label }}</span>
          </div>
        </div>
      </a-collapse-panel>

      <a-collapse-panel key="3" header="日期时间组件">
        <div class="component-grid">
          <div
            v-for="component in dateTimeComponents"
            :key="component.id"
            class="component-item"
            draggable="true"
            @dragstart="handleDragStart(component, $event)"
          >
            <component :is="component.icon" class="component-icon" />
            <span class="component-label">{{ component.label }}</span>
          </div>
        </div>
      </a-collapse-panel>

      <a-collapse-panel key="4" header="复合型组件">
        <div class="component-grid">
          <div
            v-for="component in compositeComponents"
            :key="component.id"
            class="component-item"
            draggable="true"
            @dragstart="handleDragStart(component, $event)"
          >
            <component :is="component.icon" class="component-icon" />
            <span class="component-label">{{ component.label }}</span>
          </div>
        </div>
      </a-collapse-panel>

      <a-collapse-panel key="5" header="特殊组件">
        <div class="component-grid">
          <div
            v-for="component in specialComponents"
            :key="component.id"
            class="component-item"
            draggable="true"
            @dragstart="handleDragStart(component, $event)"
          >
            <component :is="component.icon" class="component-icon" />
            <span class="component-label">{{ component.label }}</span>
          </div>
        </div>
      </a-collapse-panel>

      <a-collapse-panel key="6" header="布局容器">
        <div class="component-grid">
          <div
            v-for="component in layoutComponents"
            :key="component.id"
            class="component-item"
            draggable="true"
            @dragstart="handleDragStart(component, $event)"
          >
            <component :is="component.icon" class="component-icon" />
            <span class="component-label">{{ component.label }}</span>
          </div>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useEditorStore } from '@/stores/editor';

const editorStore = useEditorStore();
const activeKeys = ref(['1', '2', '3', '4', '5', '6']);

// 按类别分组组件
const inputComponents = computed(() => 
  editorStore.baseComponents.filter(comp => 
    ['Input', 'Password', 'InputNumber'].includes(comp.field)
  )
);

const selectComponents = computed(() => 
  editorStore.baseComponents.filter(comp => 
    ['Select', 'TreeSelect', 'Cascader'].includes(comp.field)
  )
);

const dateTimeComponents = computed(() => 
  editorStore.baseComponents.filter(comp => 
    ['DatePicker', 'TimePicker'].includes(comp.field)
  )
);

const compositeComponents = computed(() => 
  editorStore.baseComponents.filter(comp => 
    ['Checkbox.Group', 'Radio.Group'].includes(comp.field)
  )
);

const specialComponents = computed(() => 
  editorStore.baseComponents.filter(comp => 
    ['Upload'].includes(comp.field)
  )
);

const layoutComponents = computed(() => 
  editorStore.baseComponents.filter(comp => 
    ['FormGrid', 'Space', 'ArrayTable', 'ArrayCards'].includes(comp.field)
  )
);

const handleDragStart = (component: any, event: DragEvent) => {
  if (event.dataTransfer) {
    event.dataTransfer.setData('json/plain', JSON.stringify(component));
  }
};
</script>

<style lang="less" scoped>
.left-panel {
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  
  :deep(.ant-collapse) {
    border: none;
    background: transparent;
    
    .ant-collapse-header {
      font-weight: 500;
      padding: 12px 16px;
    }
  }
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px;
}

.component-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  cursor: move;
  transition: all 0.3s;

  &:hover {
    background-color: #e6f7ff;
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .component-icon {
    font-size: 20px;
    margin-bottom: 8px;
    color: #666;
  }

  .component-label {
    font-size: 12px;
    color: #333;
  }
}
</style>